<!-- eslint-disable vue/no-template-shadow -->
<template>
  <component
    :is="curEle"
    ref="curNode"
    v-bind="curComProps"
    v-on="curComEvents"
  >
    <template
      v-for="item in curComSlotList"
      :key="item?.slotCode ?? 'default'"
      #[item.slotCode]="scopeData"
    >
      <slot :key="item.slotCode" :name="item.slotCode" v-bind="scopeData">
      </slot>
    </template>
  </component>
</template>

<script lang="ts" setup>
import { useDesignEle } from './util'

import type { BwVueIns } from '../../utils/model'
import type {
  BwCustomComStructModel,
  BwCustomComFrontTypeEnum,
} from '@bitwit/base-com-render'

interface BwDesignEleProps {
  vueIns: BwVueIns
  scopeData: Record<string, any>
  nodeInfo: BwCustomComStructModel
  forVars?: Record<string, any>
  frontType?: BwCustomComFrontTypeEnum
  [key: string]: any
}

const props = withDefaults(defineProps<BwDesignEleProps>(), {})
const {
  curEle,
  curNode,
  curComProps,
  curComEvents,

  exposes,
  curComSlotList,
} = useDesignEle(props)

defineExpose(exposes)
</script>

<style lang="less" scoped>
.bw-custom-com-desigin-container {
  padding: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  overflow: auto;
}

.bw-slot-container {
  width: 100%;
  height: 100%;
  min-height: 60px;
  position: relative;
  display: inherit;
  flex-direction: inherit;

  .bw-design-node-slot-null {
    width: 100%;
    min-height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #f0f0f0 !important;

    span {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}

.bw-design-drag-item {
  margin-bottom: 8px;
  :deep(input),
  :deep(button),
  :deep(select) {
    pointer-events: none;
  }
}
</style>
